<template>
  <!-- 热映待映公共代码
    骨架屏 公共代码
 -->
  <div class="mv-body">
    <van-skeleton title :row="3" v-if="isLoading" />
    <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="body-content">
          <!-- <slot :list="list"></slot> -->
          <HotMovies v-show="active === 0" :list="list"></HotMovies>
          <ComingMovies v-show="active === 1" :list="list"></ComingMovies>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Vue from "vue";
import { Skeleton } from "vant";
import { PullRefresh } from "vant";
import { List } from "vant";
import axios from "@/api/instance.js";
import HotMovies from "@/views/home/movies/HotMovies.vue";
import ComingMovies from "@/views/home/movies/ComingMovies.vue";
Vue.use(Skeleton);
Vue.use(PullRefresh);
Vue.use(List);
export default {
  props: ["active"],
  components: { HotMovies, ComingMovies },
  data() {
    return {
      isLoading: true,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  computed: {
    cityName: function () {
      return localStorage.getItem("cityName") || "广州";
    },
    cityId: function () {
      return localStorage.getItem("cityId") || 20;
    },
  },
  methods: {
    //  加载列表所需要的数据
    async loadData() {
      console.log("加载列表的数据");
      let url =
        this.active === 0
          ? "/mmdb/movie/v2/list/hot.json"
          : "/mmdb/movie/v1/list/wish/order/coming.json";
      // console.log(url);
      //请求参数
      let { limit, offset, cityName, cityId } = this;
      console.log(limit, offset, cityName, cityId);
      //发起请求
      let result = await axios.get(url, {
        params: {
          limit,
          offset,
          ct: cityName,
          ci: cityId,
        },
      });
      // 判断是否还有数据
      let hasMore = result.data.paging.hasMore;
      this.finished = !hasMore
      //   console.log('result==>',result)
      let newlist = this.active === 0 ? result.data.hot : result.data.coming;
      // console.log(list)
      this.list = [...this.list,...newlist];
    },
    // 触底加载
    async onLoad() {
      // 判断是否刷新
      if (this.refreshing) {
        this.list = [];
        this.offset = 0;
        this.refreshing = false;
      }else{
        this.offset += this.limit
      }
      // 重新加载数据
      console.log('触底了')
      await this.loadData();
      this.loading = false;
    },
    //下拉刷新
    onRefresh() {
      // 清空列表数据
      console.log('refreshing==>',this.refreshing)
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
  async created() {
    console.log(this.active);
    this.limit = 10;
    this.offset = 0;
    await this.loadData();
    //数据加载完毕，isLoading变false
    this.isLoading = false;
  },
};
</script>

<style lang="less" scoped>
.mv-body {
  margin-top: 0.1rem;
  /deep/ .van-list__finished-text{
    
}
}
</style>